<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
</head>
<body>

<script>
  // 什么时候使用箭头函数最多？ 当我们要把一个函数作为参数传递给另一个函数
  setTimeout(function(){
    console.log(this)  //window
  },1000)
  setTimeout(() => {
    console.log(this) //window
  },1000)
  
  // 本来用方法的形式调用函数，this就是调用方法的那个对象
  // 但setTimeout()调用的代码在运行在与所在函数完全分离的执行环境上，导致setTimeout函数里的this会指向window
  
  // 问题：箭头函数中的this是如何查找的？
  // 答案:向外层作用域中，一层层查找this，直到最近有this的定义（箭头函数没有自己的this，它的this是继承来的）
  const obj={
    aaa(){
      setTimeout(function(){
        console.log(this)  //window
      },1000)
      setTimeout(() => {
        console.log(this) // obj对象  ，箭头函数没有this，向上最近查到到aaa()的this
      },1000)
    }
  }
  obj.aaa();


  
  const obj1={
    aaa(){
      setTimeout(function(){
        setTimeout(function(){
          console.log(this)  // window
        })
        setTimeout(() => {
          console.log(this) //window 查找到最近的this是上一层setTimeout()里的this
        })
      },1000)
      
      setTimeout(() => {
        setTimeout(function(){
          console.log(this) //window
        })
        setTimeout(() => {
          console.log(this) //obj1 查找到上一层aaa()函数里的this
        })
      },1000)
    }
  }
  obj1.aaa();
</script>
</body>
</html>